<html lang="en" xml:lang="en"><head>
<META http-equiv="Content-Type" content="text/html">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"><META name="description" content="This topic explains how to define the widget's UI."><meta name="content-language" content="en"><link href="rsrc/htmlhelp.css" rel="stylesheet" type="text/css"><title>Web AppBuilder for ArcGIS | Help - 
Define the template
</title>
                <script type="text/javascript" language="JavaScript">
                    var pathL  = self.location.pathname.split ("/");
                    var fname = pathL[pathL.length-1];
                    var i = fname.lastIndexOf (".htm");
                    if (i>=0) {
                    fname = fname.substring (0, i)
                    } else {
                    //??
                    }
                    if (self.location.hash) {
				    		      fname = fname + self.location.hash;
						        }
                    self.location.replace ("../index.html#//" + fname);
                </script>
                </head><!--Publication GUID: [GUID-E7D1C130-8F87-4109-8D61-E73A46083F52]--><!--Topic GUID: [GUID-77BE592F-EBF5-49FD-8204-211EADC40866]--><body><div id="content"><div class="header"><h1>
Define the template
</h1><div id="breadcrumb"></div></div>

<p id="GUID-E02A94C5-8358-450D-8447-B923C527F729">Each <span purpose="ph" varid="wab">Web AppBuilder for ArcGIS</span> widget has an HTML template. This template defines the widget’s UI.</p><p id="GUID-326F8035-A5FA-408A-9B7A-F4036F67C183">Open the Widget.html file in a text editor. Replace the content with the following:</p>
<p id="GUID-6BF04C87-EA76-4926-9A39-CA0128FB4700"><div class="codeblock" purpose="codeblock"><div class="highlight"><pre><code><span class="nt">&lt;div&gt;</span>
    <span class="nt">&lt;div&gt;</span>I am a demo widget.<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
</code></pre></div>
</div></p><p id="GUID-B60DA015-A67D-45DC-BB63-7B26E5CF8D78">To test your widget, open the config-demo.json file in
the stemapp/sample-configs folder for 2D widget or stemapp3d/sample-configs folder for 3D widget. Find widgetPool-&gt;widgets, and
add a new widget element as follows:
</p><p id="GUID-A82C467C-0A59-44E5-84C3-19385F2F09E4"><div class="codeblock" purpose="codeblock"><div class="highlight"><pre><code><span class="p">{</span>
  <span class="s2">&quot;label&quot;</span><span class="o">:</span> <span class="s2">&quot;demo&quot;</span><span class="p">,</span>
  <span class="s2">&quot;uri&quot;</span><span class="o">:</span> <span class="s2">&quot;widgets/Demo/Widget&quot;</span>
<span class="p">}</span>
</code></pre></div>
</div></p><p id="GUID-8CEB39A2-2B2B-43AE-BED7-4CCDECEFB0B5">Start the app through <span class="usertext">http://[your host]/webappviewer/?config=sample-configs/config-demo.json</span>, and click the icon. The widget will look like the following:</p><div class="image" purpose="image"><table><tr><td><img class="break" src="03w3/GUID-9F25CB41-FAFA-41B4-845A-3EA126991A13-web.png" purpose="img" alt="Define the widget template" title="Define the widget template"></td></tr></table></div><p id="GUID-CCE14E75-2E82-4017-B453-14BAF74D8205"><div class="notes" id="GUID-9544CFBF-80EE-4F46-8CAD-6E8A106DD746"><div class="note"><img class="note_img" src="rsrc/note.png" alt="Note" title="Note"><span>Note:</span></div><div class="tipbody"><p id="GUID-4F5557F0-7E4D-4546-B647-DC61CDBBD204">By default, the widget’s template does not support dijits in the template. If you need to use dijits in the template, add <span class="usertext">dijit/_WidgetsInTemplateMixin</span> to your required list, and add this class to your widget. Ensure that you have all the required dijits for your template. For more information, see  <a target="_blank" class="xref" href="http://dojotoolkit.org/documentation/tutorials/1.9/templated/" rel="http://dojotoolkit.org/documentation/tutorials/1.9/templated/">Creating template-based widgets</a>.</p></div></div></p>
<div class="footer"> Copyright © 1995-2016 Esri. All rights reserved. </div></div></body></html>